<template>
  <view class="container">
    <!-- 第一楼层 -->
    <view class="floor">
      <!-- 左侧分类列表 -->
      <scroll-view class="category-list" scroll-y>
        <view 
          class="category-item" 
          v-for="(item, idx) in list" :key="item.id"
          :class="['left-item', item.sid === activeIdx ? 'active' : '']" @click="selectLeft(item.sid)">
          {{ item.text }}
        </view>
      </scroll-view>
      
      <!-- 右侧疾病列表 -->
      <scroll-view class="disease-list" scroll-y>
        <view 
          class="disease-item" 
         v-for="right in rightList" :key="right.id"
        >
          {{ right.title }}
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import {ref,computed} from 'vue'
	const list = ref([])
	const currentChildrenList = ref([])
	const rightList = ref([])
	const activeIdx = ref(14)
	const listdata = async function() {
		try {
			// 获取 token 并打印调试信息
			const token = uni.getStorageSync('token')
			if (!token) {
				console.error('Token 为空，请检查登录状态')
				return
			}

			// 发起请求并打印完整响应信息
			const res = await new Promise(() => {

				uni.request({
					url: 'http://localhost:3010/query',
					header: {
						'Authorization': `Bearer ${token}`
					},
					method: "GET",
					success: (res) => {
					  console.log(res, '555');
					  // 先校验 res.data.data 是否存在，不存在给默认空数组
					  const originData = res.data.data || []; 
					  list.value = originData.map(v => {
					    return {
					      text: v.subject,
					      children: [],
					      id: v.sid,
					      sid: v.sid
					    }
					  });
					}
				})
			})


		} catch (err) {
			console.error('请求发生错误:', err)
		}
	}
	const selectLeft = async function(sid) {
		activeIdx.value = sid
		getDisease(sid)
	}
	const getDisease = async function(sid) {
		try {
			// 获取 token 并打印调试信息
			const token = uni.getStorageSync('token')
			if (!token) {
				console.error('Token 为空，请检查登录状态')
				return
			}
console.log('当前传的 sid：', sid)
			// 发起请求并打印完整响应信息
			const res = await new Promise(() => {
				uni.request({
					url: 'http://localhost:3010/bible/queryFid',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': `Bearer ${token}`
					},
					method: "POST",
					success: (res) => {
					  console.log(res.data.data, 222)
					  // 同样校验 res.data.data，避免 undefined 进 map
					  const diseaseData = res.data.data || []; 
					  rightList.value = diseaseData.map(v => ({
					    title: v.Disease, 
					        id: v.did 
					  }));
					},
					data: {
						id: sid
					}
				})
			})


		} catch (err) {
			console.error('请求发生错误:', err)
		}
	}

	getDisease(activeIdx.value)
	listdata()
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  height: 100vh;
  box-sizing: border-box;
}

.floor {
  height: calc(100vh - 40rpx);
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
}

.category-list {
  width: 46%;
  background-color: #a4ffc2;
  
  .category-item {
    padding: 24rpx 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    
    &.active {
      background-color: #f0fff5;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 4rpx;
        background-color: #2c7a4d;
      }
    }
  }
}

.disease-list {
  width: 54%;
  background-color: #ffffff;
  
  .disease-item {
    padding: 24rpx 30rpx;
    font-size: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
}
</style>
